<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grid</title>
<!-- css -->
<link id="v_theme" href="../../src/css/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../src/css/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<!--lib js  -->
<script type="text/javascript" src="../../src/lib/vue.js"></script>
<script type="text/javascript" src="../../src/lib/jquery.min.js"></script>
<!-- js加载器 -->
<script type="text/javascript" src="../../src/loader/loader.js"></script>

<script type="text/javascript" src="gridData.js"></script>
<script type="text/javascript" src="../js/theme.js"></script>
</head>
<body>

<button onclick="load()">load()</button>
<button onclick="loadData()">loadData()</button>
<button onclick="setPageSize(20)">setPageSize(20)</button>
<button onclick="hide()">hide()</button>
<button onclick="show()">show()</button>
<button onclick="getData()">getData()</button>
<button onclick="getRows()">getRows()</button>
<hr>
<button onclick="getChecked()">getChecked()</button>
<button onclick="getSelected()">getSelected()</button>
<button onclick="checkAll()">checkAll</button>
<button onclick="uncheckAll()">uncheckAll()</button>
<button onclick="checkRow(2)">checkRow(2)</button>
<button onclick="uncheckRow(2)">uncheckRow(2)</button>
<button onclick="selectRow(2)">selectRow(2)</button>
<button onclick="unselectRow(2)">unselectRow(2)</button>
<button onclick="selectRecord(26)">selectRecord(26)</button>
<button onclick="removeData()">removeData()</button>
<hr>
手机号:<input id="mobile" type="text"> <button onclick="search()">查询</button>
<br><br>
<div id="grid"></div>


<script type="text/javascript">
var listUrl = 'http://localhost:8087/emptyProject/listEasyuiOrderInfo_backuser.do';
var grid;


VUI
.dir('../../src/') // 设置JS存放根目录
.use('Grid',function() { // 加载组件
	grid = new VUI.Grid({
		renderId:'grid'
		,autoRender:true
		,url : listUrl
		,striped:true // 斑马线
		,idField:'orderId'
		,pagination :true
		,singleSelect :false // 是否单选
		,checkOnSelect :true
		,rownumbers :true
		,selectCache :true
		,queryParams:{name:'11',age:22}
		,onLoadError:function() {
			console.log('加载失败,尝试加载本地数据')
			loadData(); // 加载失败尝试加载本地数据
		}
		,onLoadSuccess:function(e) {
			console.log(e.data)
		}
		,onBeforeLoad:function(e) {
			console.log(e.data)
		}
		,onClickRow:function(e) {
			console.log('onClickRow,' + e.index + ' mobile:' + e.row.mobile)
		}
		,onDblClickRow :function(e) {
			console.log('onDblClickRow,' + e.index + ' mobile:' + e.row.mobile)
		}
		,onClickCell :function(e) {
			console.log('onClickCell,' + e.index + ' value:' + e.value + ' field:' + e.head.field)
		}
		,onDblClickCell :function(e) {
			console.log('onDblClickCell,' + e.index + ' value:' + e.value + ' field:' + e.head.field)
		}
		,onSortColumn :function(sortName,sortOrder) {
			console.log('onSortColumn sortName:' + sortName + ',sortOrder:'+sortOrder)
		}
		,onSelect :function(e) {
			console.log('onSelect index:' + e.index + ' mobile:' + e.row.mobile)
		}
		,onUnSelect :function(e) {
			console.log('onUnSelect index:' + e.index + ' city:' + e.row.cityName)
		}
		,onSelectAll :function(e) {
			console.log('onSelectAll rows.length=' + e.rows.length)
		}
		,onUnSelectAll :function(e) {
			console.log('onUnSelectAll rows.length=' + e.rows.length)
		}
		,onCheck :function(e) {
			console.log('onCheck index:' + e.index + ' mobile:' + e.row.mobile)
		}
		,onUncheck :function(e) {
			console.log('onUncheck index:' + e.index + ' mobile:' + e.row.mobile)
		}
		,onCheckAll :function(e) {
			console.log('onCheckAll rows.length=' + e.rows.length)
		}
		,onUncheckAll :function(e) {
			console.log('onUncheckAll rows.length=' + e.rows.length)
		}
		,columns : [ [
			{
				checkbox : true
			},
			{
				field : 'cityName',
				title : '城市'
				,halign:'left'
				,styler: function(value,row,index){
					if (value == 12){
						return 'background-color:#ffee00;color:red;';
					}
				}

			},
			{
				field : 'mobile',
				title : '手机号'
				,align:'center'
				,formatter:function(val,obj,index,$td){
					if(val == 22) {
						$td.css({'background-color':'#ccc','color':'red'});
						return '<i>'+val+'</i>'
					}
					return val;
				}
			},
			{
				field : 'address',
				title : '地址'
			},
			{
				field : 'createDate',
				title : '创建时间'
				,sortable:true
			}] 
		]
	});
});


function search() {
	var params = {mobileSch:$('#mobile').val()}
	grid.load(params);
}

function load(){
	grid.load();
}
function loadData(){
	grid.loadData(gridData);
}
function show(){
	grid.show();
}
function hide(){
	grid.hide();
}
function getData(){
	var data = grid.getData();
	console.log(data)
}
function getRows(){
	var rows = grid.getRows();
	console.log(rows)
}

function clearChecked(){
	grid.clearChecked();
}
function clearSelections(){
	grid.clearSelections();
}
function uncheckAll(){
	grid.uncheckAll();
}
function checkAll(){
	grid.checkAll();
}
function checkRow(i){
	grid.checkRow(i);
}
function uncheckRow(i){
	grid.uncheckRow(i);
}
function selectRow(i){
	grid.selectRow(i);
}
function unselectRow(i){
	grid.unselectRow(i);
}
function selectRecord(val){
	grid.selectRecord(val);
}
function getChecked(){
	var datas = grid.getChecked();
	console.log(datas);
}
function getSelected(){
	var datas = grid.getSelected();
	console.log(datas);
}
function removeData(){
	grid.removeData();
}
function setPageSize(size){
	grid.setPageSize(size);
}
</script>
</body>
</html>